<template>
  <el-dialog :visible="true" title="订单详情" @close="$emit('close-dialog')">
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">店铺名称：</div></el-col>
      <el-col :span="16"><div class="desc">{{ shopDetailName }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">订单编号：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.orderId }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">微信支付单号：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.test }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">订单时间：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.orderTime }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">就餐模式：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.distributionMode | distributionModeFilter }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">验证码：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.verificationCode }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">手机号：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.telephone }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">订单金额：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.orderMoney }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">评价：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.evaluate }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">评价内容：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.evaluateContent }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">状态：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.state | orderStateFilter }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">菜品总价：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.totalPrice }}</div></el-col>
    </el-row>
    <el-row :gutter="20" class="detail-row">
      <el-col :span="8"><div class="title">服务费：</div></el-col>
      <el-col :span="16"><div class="desc">{{ detail.serviceCharge }}</div></el-col>
    </el-row>
    <el-table :data="detail.mealDetal">
      <el-table-column property="mealCategory" label="餐品类别" width="150"/>
      <el-table-column property="mealName" label="餐品名称" width="200"/>
      <el-table-column property="mealPrice" label="餐品单价" width="200"/>
      <el-table-column property="mealNumber" label="餐品数量" width="200"/>
      <el-table-column property="subtotal" label="小记"/>
    </el-table>
  </el-dialog>
</template>

<script>
import { fetchOrderDetails } from '@/api/report/order.js'
import DataConfMixin from '@/pages/common/mixin/DataConf.js'
export default {
  mixins: [DataConfMixin],
  props: {
    shopDetailName: {
      type: String,
      required: true,
      default: ''
    },
    orderId: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      detail: {}
    }
  },
  async created() {
    const res = await fetchOrderDetails({ OrderId: this.orderId })
    // console.log(JSON.stringify(res))
    this.detail = res.data || {}
  }
}
</script>

<style lang="scss">
.detail-row {
  height: 30px;
  line-height: 30px;
  .title {
    text-align: right;
    font-weight: 600;
  }
  .desc {

  }
}
</style>
